<template>
  <div class="userControl">
    <!-- 用户管理 -->
    <div class="userList">
      <div class="chooseContainer padding-box">
        <el-input placeholder="客户姓名" v-model="searchKey.name" class="chooseBox"></el-input>
        <el-input placeholder="客户电话" v-model="searchKey.mobile" class="chooseBox"></el-input>
        <el-select v-model="searchKey.user_type" class="chooseBox" filterable placeholder="用户类型" clearable>
          <el-option v-for="item in searchKey.user_type" :key="item.value" :label="item.text" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="searchKey.orderNum" class="chooseBox" filterable placeholder="消费次数/月" clearable>
          <el-option v-for="item in searchKey.orderNum" :key="item.value" :label="item.text" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="searchKey.option" class="chooseBox" filterable placeholder="时间" clearable >
          <el-option v-for="item in searchKey.option" :key="item.value" :label="item.text" :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker v-model="searchKey.date"  type="datetimerange" style="margin: 0px 16px" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <div class="btnBox">
          <el-button type="primary" @click="searchBtn">查询</el-button>
          <el-button @click="searchClear">清空</el-button>
          <el-button @click="exportUser">导出客户</el-button>
        </div>
      </div>
      <div class="padding-box">
        <el-table :data="userData" style="width: 100%" empty-text="没有搜索到相关用户">
          <el-table-column prop="id" label="用户ID" min-width="120" align="center">
          </el-table-column>
          <el-table-column prop="photo" label="用户头像" min-width="120">
            <template slot-scope="scope">
              <img style="width:60px;height:60px" :src="scope.row.photo"/>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" min-width="120">
          </el-table-column>
          <el-table-column prop="sex" label="性别" min-width="120">
          </el-table-column>
          <el-table-column prop="mobile" label="电话" min-width="120">
          </el-table-column>
          <el-table-column prop="user_type" label="用户类型" min-width="120">
          </el-table-column>
          <el-table-column prop="creat_time" label="注册时间" min-width="120">
          </el-table-column>
          <el-table-column prop="login_date" label="最近登陆" min-width="120">
          </el-table-column>
          <el-table-column prop="orderNum" label="消费次数/月" min-width="120">
          </el-table-column>
          <el-table-column label="操作" min-width="80">
            <template slot-scope="scope">
              <el-button type="text" @click="seeAllrecord(scope.row)" size="mini">查看全部记录</el-button>
              <!-- <el-button type="text" size="mini" @click="deleteConsumer(scope.row)">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="pageContainer">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="this.pageSizeArray" :page-size="this.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="this.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { pageCommon } from '@/assets/js/mixin'
export default {
  name: 'userControl',
  mixins: [pageCommon],
  data() {
    return {
      searchKey: {
        name: '',
        mobile: '',
        date: 'start_time' + 'end_time',
        user_type: [
          {
            text: '普通用户',
            value: 1
          },
          {
            text: '充值用户',
            value: 2
          },
          {
            text: '会员',
            value: 3
          }
        ],
        orderNum: [
          {
            text: '1',
            value: 1
          },
          {
            text: '2',
            value: 2
          },
          {
            text: '3',
            value: 3
          },
          {
            text: '4',
            value: 4
          },
          {
            text: '5',
            value: 5
          },
          {
            text: '>5',
            value: 6
          }
        ],
        option: [
          {
            text: '注册时间',
            value: 1
          },
          {
            text: '最近登陆',
            value: 2
          }
        ]
      },
      userData: [
        {
          id: 1111,
          name: 'zhangsan',
          photo: 1,
          sex: '男',
          mobile: '12332',
          user_type: '会员',
          creat_time: '2018/01/01',
          login_date: '20180704',
          orderNum: '5'
        },
        {
          id: 1111,
          name: 'zhangsan',
          photo: 1,
          sex: '男',
          mobile: '12332',
          user_type: '会员',
          creat_time: '2018/01/01',
          login_date: '20180704',
          orderNum: '5'
        }
      ]
    }
  },
  computed: {
    apiParams() {
      return {
        // pageSize: this.pageSize,
        // pageNo: this.pageNo,
        // name: this.name,
        // id: this.oneCategory
      }
    }
  },
  methods: {
    seeAllrecord() {
      this.$router.push({ name: 'userControl/seeAllrecord' })
    },
    searchBtn() {
      // this.getList()
    },
    searchClear() {},
    exportUser() {}
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/variable'
.chooseContainer
  background $bg-normal
  overflow hidden
  display flex
  width 100%
  padding $spacing
  padding-bottom 20px
  flex-wrap wrap
  box-sizing border-box
  .chooseBox
    flex 0 0 224px
    margin-right $spacing
    margin-bottom $spacing
</style>
